<template>
  <div class="loginBox">
    <h1>商户登陆</h1>
    <Form ref="form" class="form" :model="formData" :rules="rule">
      <Form-item prop="username">
        <Input type="text" v-model="formData.username" placeholder="用户名" size="large">
        <Icon type="person" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item prop="password">
        <Input type="password" v-model="formData.password" placeholder="密码" size="large">
        <Icon type="locked" slot="prepend"></Icon>
        </Input>
      </Form-item>
      <Form-item prop="verifyImg">
        <Input type="text" v-model="formData.verifyImg" placeholder="验证码" size="large" style="width: 172px">
        </Input>
        <img src="http://www.kvvgame.com/Register/verifyImg.html" height="32" width="120"
             style="vertical-align: bottom;margin: 2px">
      </Form-item>
      <Form-item label="记住密码">
        <i-switch v-model="formData.remember">
          <Icon type="android-done" slot="open"></Icon>
          <Icon type="android-close" slot="close"></Icon>
        </i-switch>
      </Form-item>
      <Form-item>
        <Button type="primary" @click="handleSubmit('form')" style="width: 100%">登录</Button>
      </Form-item>
    </Form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        formData: {
          username: 'user002',
          password: '123456a',
          verifyImg: '123456',
          remember: true
        },
        rule: {
          username: [
            {required: true, message: '请填写用户名', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let vm = this
            this.$http.post('Login', this.formData).then(function ({data}) {
              if (data.status === 1) {
                vm.$Message.success(data.info)
                vm.$router.push({name: 'home'}
                )
              } else {
                vm.$Message.error(data.info)
              }
            })
          } else {
            this.$Message.error('表单验证失败!')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .loginBox {
    text-align: center;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -275px;
    margin-left: -275px;
    width: 550px;
    padding: 20px 50px 30px;
    box-shadow: 0 0 10px;
    .form {
      margin: auto;
      margin-top: 30px;
      width: 300px;
    }
  }
</style>
